<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      background-color:#fff;  /*背景色不一样就会被看穿啦*/
    }
    #box1{
      width: 180px;
      height: 180px;
      /*background-color: #8a7881;*/
      border: 10px solid skyblue;
      border-radius: 100px;
      /*transform: rotate(360deg);*/
      position: relative;
      animation: roate 1.5s infinite linear;/*这里是给动画调用的时的参数*/
    }
    @keyframes roate {
      0%{ transform: rotateZ(0deg)}
      100%{ transform: rotateZ(360deg)}
    }

    #box1::after{
      content: '';
      display: block;
      position: absolute;
      width: 200px;
      height: 200px;
      top: -10px;
      left: -10px;
      background-image: linear-gradient(to left, #fefefe, rgba(255, 255, 255, .1));
      z-index: 2;
    }


    /*//雪花飘落*/
      .snowDown {
        animation: snowDown 3s linear infinite normal;
        -webkit-animation: snowDown 3s linear infinite normal;
        position: relative;
      }
    @keyframes snowDown {
      from {
        opacity: 1;
        top: 0;
      }
      to {
        opacity: 0;
        top: 30em;
      }
    }

  </style>
</head>
<body>
<div id="box1">

</div>

<div class="snowDown">

</div>

</body>
</html>